iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
自我挑戰組

JavaScript DOM 操作系列 第 16

DAY 16: 使用 setTimeout 和 setInterval 進行 DOM 操作

  • 分享至 

  • xImage
  •  

第 16 天的主題是使用 setTimeout 和 setInterval 控制 DOM 的動態更新,這兩個方法能幫助我們按時間順序操作頁面內容。

  1. setTimeout 範例 setTimeout 可用來在指定時間後執行一次某些操作,例如更新頁面文字:

https://ithelp.ithome.com.tw/upload/images/20240930/20169384AzSF1aK4gT.png

結果: 頁面會在 3 秒後顯示 “3秒後更新!” 的訊息。這讓我理解到 setTimeout 非常適合用來處理延遲操作。

  1. setInterval 範例 與 setTimeout 不同,setInterval 會每隔固定時間重複執行。以下是每秒更新一次倒數計時的例子:

https://ithelp.ithome.com.tw/upload/images/20240930/20169384UJqULvkQPp.png

結果: 頁面會每秒更新一次倒數直到停止。透過這個範例,我學到如何使用 setInterval 進行持續更新操作。

  1. 補充:清除定時器 要避免 setTimeout 或 setInterval 無限運行,我們可以用 clearTimeout 或 clearInterval 來中斷它們。以下範例展示如何清除定時器:

https://ithelp.ithome.com.tw/upload/images/20240930/20169384ZDoHjSYkhF.png

結果: 該訊息不會出現,這展示了如何有效管理時間操作。

這次的學習讓我體會到時間控制在 DOM 操作中的靈活運用,非常實用。


上一篇
DAY 15: 事件委派
下一篇
DAY 17: 建立簡單的圖片輪播效果
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言